<!-- 反馈页 -->
<template>
	<view class="bg">
		<top_nav_return :topNavTitle="topNavTitle" :returnState="true"></top_nav_return>
		<view class="biji_textarea">
			<!-- <view class="biji_textarea_title">
				笔记内容
			</view> -->
			<textarea v-model="text" placeholder="请输入反馈内容" maxlength="100"></textarea>
			<view class="now_length_box">
				<span v-if="now_length >= 100">
					<span style="color:red;">{{now_length}}</span>/100
				</span>
				<span v-else>
					{{now_length}}/100
				</span>
			</view>
		</view>

		<view class="biji_pic">
			<!-- <view class="biji_pic_title">
				上传图片
			</view> -->
			<view class="biji_pic_update">
				<view class="updatebox" @tap="update_img()">
					<view class="">
						<img src="../../../static/icon/update1.png" alt="">
						<view class="text">
							上传图像
						</view>
					</view>
				</view>
				<view class="imgbox" v-for="(item,index) in imgArr" :key="index">
					<img :src="item" alt="" @click="previewImage(item)">
					<img src="../../../static/icon/close.png" alt=""
						style="position: absolute; top:-15rpx; right:-15rpx; width:38rpx; height:38rpx;"
						@tap="del_img(index)">
				</view>
			</view>

			<view class="feedback_type_title">
				反馈类型
			</view>
			<view class="feedback_type">
				<view class="feedback_type_radio" @tap="change_radio_type(1)">
					<view class="feedback_type_radio_borderBox" :class="{active_radio_borderBox : radio_type == 1}">
					</view>
					<view class="feedback_type_radio_text">
						功能/系统操作
					</view>
				</view>
				<view class="feedback_type_radio_2" @tap="change_radio_type(2)">
					<view class="feedback_type_radio_borderBox" :class="{active_radio_borderBox : radio_type == 2}">
					</view>
					<view class="feedback_type_radio_text">
						<!-- 课程/商品 -->
						题库
					</view>
				</view>
				<!-- 				<view class="feedback_type_radio" @tap="change_radio_type(3)">
					<view class="feedback_type_radio_borderBox" :class="{active_radio_borderBox : radio_type == 3}">
					</view>
					<view class="feedback_type_radio_text">
						服务质量
					</view>
				</view>
				<view class="feedback_type_radio_2" @tap="change_radio_type(4)">
					<view class="feedback_type_radio_borderBox" :class="{active_radio_borderBox : radio_type == 4}">
					</view>
					<view class="feedback_type_radio_text">
						投诉举报
					</view>
				</view> -->
				<view class="feedback_type_radio" @tap="change_radio_type(5)">
					<view class="feedback_type_radio_borderBox" :class="{active_radio_borderBox : radio_type == 5}">
					</view>
					<view class="feedback_type_radio_text">
						其他
					</view>
				</view>
			</view>
			<view class="phone_input">
				<input type="number" placeholder="请输入联系方式，方便我们联系您，为您解决问题" v-model="phone" maxlength="11"
					placeholder-style="font-size: 24rpx;font-family: PingFang SC;font-weight: 500;color: #999999;">
			</view>
		</view>

		<view class="footer">
			<view class="footer_tip">
				感谢您提出的宝贵意见
			</view>
			<view class="footer_btn" @tap="submit()">
				提交
			</view>
		</view>

	</view>
</template>

<script>
	import {
		uploadLocal // 上传图片
	} from "@/api/professionalChoice.js";
	import {
		upload
	} from '@/api/index/upload.js'
	import {
		suggestionFeedback
	} from '@/api/mine/feedback.js'
	import {
		getToken
	} from '@/common/util/index.js'
	export default {
		data() {
			return {
				imageUrls: getApp().globalData.imaeWd,
				// 自定义顶部导航标题
				topNavTitle: '意见反馈',
				// 图片数组
				imgArr: [],
				// 评论框内容
				text: '',
				// 联系方式
				phone: null,
				// 单选状态
				radio_type: 1
			}
		},
		computed: {
			now_length() {
				return this.text.length
			}
		},
		methods: {
			previewImage(url) {
				let arr = []
				arr[0] = url
				uni.previewImage({
					indicator: "none", //图片指示器样式
					current: 0, //图片索引值
					urls: arr //需要预览的图片链接列表
				});
			},
			update_img() {
				if (this.imgArr.length < 3) {
					let that = this
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择和拍照
						success: (chooseImageRes) => {
							// console.log(chooseImageRes.tempFilePaths.toString());
							// let imgUrl = chooseImageRes.tempFilePaths.toString()
							// this.imgArr.push(imgUrl)
							console.log(chooseImageRes.tempFilePaths[0]);
							uni.uploadFile({
								// url: 'https://wendu.changyangdt.com/cyQuestionApi/student/management/wdStudentManagement/uploadLocal', //仅为示例，非真实的接口地址
								url: 'https://question-bank.changyangdt.com/cyQuestionApi/student/management/wdStudentManagement/uploadLocal', //仅为示例，非真实的接口地址
								filePath: chooseImageRes.tempFilePaths[0],
								name: 'file',
								success: (uploadFileRes) => {
									console.log(uploadFileRes, '111')
									// console.log(tempFilePaths,'222')
									let data = JSON.parse(uploadFileRes.data)
									if (data.code == 200 && data.result) {
										that.imgArr.push(data.result)
									} else {
										uni.showToast({
											title: data.message,
											icon: 'none'
										})
									}
								}
							});
						}
					});
				} else {
					uni.showToast({
						title: '最多三张'
					})
				}

			},
			submit() {
				var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (this.text == '') {
					uni.showToast({
						title: '反馈内容空',
						icon: 'error'
					})
					return
				} else if (myreg.test(this.phone) == false) {
					uni.showToast({
						title: '手机号无效',
						icon: 'error'
					})
					return
				} else {
					let cySuggestionFeedbackAddDTO = {
						feedContent: this.text,
						feedImg: this.imgArr.join(','),
						feedPhone: this.phone,
						feedType: this.radio_type
					}
					console.log(cySuggestionFeedbackAddDTO);
					suggestionFeedback(cySuggestionFeedbackAddDTO).then((res) => {
						console.log('反馈返回值：', res);
						if (res.code == 200) {
							uni.showToast({
								title: '反馈成功！'
							})
							setTimeout(function() {
								uni.navigateBack()
							}, 3000)
						} else {
							uni.showToast({
								title: '反馈失败了',
								icon: 'error'
							})
						}
					}).catch((err) => {
						console.log(err);
					})
				}


			},
			del_img(index) {
				console.log(index);
				this.imgArr.splice(index, 1)
			},
			change_radio_type(e) {
				this.radio_type = e
			},
		}
	}
</script>

<style lang="scss" scoped>
	.now_length_box {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.bg {
		min-height: 100vh;
		background-color: #f3f3f3;
		padding-top: 190rpx;
	}

	.biji_textarea {
		background-color: white;
		margin: 0 30rpx 20rpx 30rpx;
		padding: 20rpx;
		position: relative;

		.biji_textarea_title {
			margin-bottom: 20rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #132B2E;
		}

		textarea {
			// background-color: wheat;
			width: 100%;
		}
	}


	.biji_pic {
		background-color: white;
		margin: 0 30rpx;
		padding-top: 30rpx;
		padding-bottom: 55rpx;
		margin-bottom: 200rpx;
	}

	.biji_pic_update {
		display: flex;
		padding-left: 20rpx;
		flex-wrap: wrap;

		.updatebox {
			width: 200rpx;
			height: 200rpx;
			border: 1rpx solid #DDDDDD;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 20rpx;
			margin-bottom: 20rpx;

			view {
				text-align: center;

				img {
					width: 78rpx;
					height: 67rpx;
				}

				.text {
					margin-top: 15rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
		}

		.imgbox {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			position: relative;

			img {
				width: 100%;
				height: 100%;
			}
		}

	}

	.feedback_type_title {
		margin-top: 10rpx;
		margin-left: 20rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.feedback_type {
		margin-left: 40rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.feedback_type_radio {
		display: flex;
		align-items: center;
		width: 250rpx;
		margin-top: 30rpx;
	}

	.feedback_type_radio_2 {
		margin-left: 110rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	}

	.feedback_type_radio_borderBox {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		border: 1rpx #999999 solid;
		margin-right: 16rpx;
	}

	.feedback_type_radio_text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}


	.phone_input {
		margin: 30rpx 20rpx 0 20rpx;
		padding: 30rpx 0 30rpx 20rpx;
		background: #FFFFFF;
		border: 1rpx solid #D9DADF;
		border-radius: 10rpx;
	}


	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 0px 46rpx 0px rgba(63, 67, 73, 0.2000);
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.footer_tip {
			width: 280rpx;
			margin-left: 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #132B2E;
		}

		.footer_btn {
			margin: 25rpx 30rpx 25rpx 100rpx;
			width: 270rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			background: #0191A0;
			border-radius: 10rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}


	.active_radio_borderBox {
		background-color: #0191a0;
	}
</style>
